<template>
<div>
    <div class="top">
            <div class="icon"><img src="@/assets/icon.png" alt=""></div>
            <div class="wz">基础信息</div>
            <div class="rule-btn"><img src="@/assets/rule.png" alt="" @click="show = true"></div>
    </div>
    <div class="fix" v-show="show" @click="show = false" >
            <div class="cont-tk">
                <div class="cont">
                    <div class="title">商户赞助规则</div>
                    <div class="part">
                        <div class="sign">关于信息</div>
                        <div>准确填写信息，便于消费者找到店铺，我们确保您的信息安全不被泄露</div>
                    </div>
                    <div class="part">
                        <div class="sign">中奖机制</div>
                        <div>我们将根据您设置各项奖品的份数及参与人数科学设置完全随机的获奖几率</div>
                    </div>
                    <div class="part">
                        <div class="sign">兑奖规则</div>
                        <div>请尽可能描述清楚您提供的奖品的使用规则，以免发生不必要的误会</div>
                    </div>
                    <div class="part">
                        <div class="sign">投放价格</div>
                        <div>因项目访问有高低峰时期，因此采取实时公平定价，浏览量高则投放价格高</div>
                    </div>
                </div>
                <div class="tel">若您仍有疑问，请联系电话18091838560</div>
                <div class="btn">OK</div>
            </div>
            
    </div>
</div>
</template>
<script>
export default {
 data() {
    return {
        show: false,
    };
  },
}
</script>
<style lang="less" scoped>
.top{
        display: flex;
        // justify-content: space-between;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        .icon{
            width: 50%;
            img{
                width: 100%;
            }
        }
        .wz{
            font-size: 23px;
            font-weight: bold;
        }
        .rule-btn{
            width: 5%;
            margin-top: -50px;
            img{
                width: 100%;
            }
        }
    }
.fix{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.7);
        z-index: 99;
        .cont-tk{
            position: absolute;
            width: 85%;
            transform: translate(-50%,-50%);
            top:53%;
            left: 50%;
            .cont{
                background: #fff;
                height: 110vw;
                width: 100%;
                overflow-y: scroll;
                border-radius: 5px 5px 0px 0px;
                .title{
                    text-align: center;
                    font-size: 16px;
                    font-weight: bold;
                    padding: 20px 0 10px;
                }
                .part{
                    width: 80%;
                    margin: 0 auto 10px;
                    font-size: 12px;
                    color: #666666;
                    .sign{
                        font-size: 14px;
                        padding: 5px 0;
                        color: #141414;
                    }
                }
            }
            .btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #487CFB;
            color: #fff;
            text-align: center;
            border-radius: 0px 0px 5px 5px;
            
        }
        .tel{
            background: #fff;
            margin-top: -3px;
            font-size: 12px;
            color: #666666;
            padding: 0 30px 15px;

        }
        }
        
  }
</style>